<template>
	<view >
	<view v-if="!showBedInfo" class="my-page-content ">
		<view class="my-m-title">{{formData.name}} 基本信息</view>
		<view  class="mb20 flex-between">
			 <span>床铺信息</span>
			 <span @click="showBedInfo = true">
				<span  class="color-orange" v-if="formData.beds.length == 0">  
				 去编辑  <uni-icons color="#EC8403" class="my-right-icon color-orange" type="right" size="18"></uni-icons>
				 </span>
				 <span class="grey-tips" v-else>
					 已完成   <uni-icons class="my-right-icon" type="right" size="18"></uni-icons>
				</span>
			 </span>
			
		</view>
		<view class="mb20" >
			<view v-for="(item, index) in formData.beds  " :key="index"  class="f28 mb200">
				{{item.title}} {{item.sizeName}} {{item.num}}张
			</view>
		</view>
		<view  class="mb20 flex-between">
			 <span>房间内带卫生间</span>
			 <van-switch :active-value="1" :inactive-value="0" :checked="formData.has_bathroom"  @change="changeValue" inactive-color="#ccc" size="20px" active-color="#FCE353"  />
		</view>
		
		<view class="mb20">宜居人数</view>
		<picker class="mb40 my-select-class"  range-key="label" @change="changeNum" :value="peopleIndex" :range="peopleList">
			<input type="text" :value="peopleList[peopleIndex].label"  placeholder="请选择" disabled />
		</picker>
		
	</view>
		<setBedInfo  :bedSelectList="formData.beds" v-if="showBedInfo" ref="setBedInfoRef"></setBedInfo>
		
	</view>
</template>


<script>
	import setBedInfo from './setBedInfo.vue'
	export default {
		components: {
			setBedInfo,
		},
		props: {
		    dataItem: Object
		},
		data() {
			return {
				  formData: 
					  {
						  id: '',
						  house_id: this.$getStorage('houseId'),
						  name: '房间1',
						  has_bathroom: '',
						  people_count: '',
						  beds: [],
						  images: [],
						  price: '',
						  date_range: '',
						  disabled_date_range: '',
					 },
				  peopleList: [],
				  peopleIndex: '',
				  showBedInfo: false
		     	}
			},
			mounted() {
				this.init();
			},
			watch: { 
				'dataItem': {
					handler(n) {
						this.formData = this.dataItem;
						this.peopleIndex = this.formData.people_count?this.formData.people_count -1: '';
						console.log(this.formData, 'this.roomInfoo')
					},
					deep: true,
					immediate: true,
				}
			},
			methods: {
				init() {
					this.formData = this.dataItem;
					this.getPeopleList();
				},
				getPeopleList() {
					for(let i=1; i<21; i++) {
						this.peopleList.push(
						  {
							  label: i +'位',
							  value: i
						  }
						)
					}
				},
				changeValue(e) {
				    this.formData.has_bathroom=  e.detail;
				},
				changeNum(e) {
		            this.peopleIndex = e.detail.value;
					this.formData.people_count= this.peopleList[this.peopleIndex].value;
					
		        },
				nextStep() {
					if(this.showBedInfo) {
						let data =  this.$refs.setBedInfoRef.nextStep();
						if(data) {
							this.formData.beds = data;
							this.showBedInfo = false;
						}
						return false;
					}
					if(this.formData.beds.length == 0) {
						this.$toast('请完成床铺信息');
						return false;
					}
					return this.formData;
					
				}
			}
	}
</script>

<style>
</style>